fix(apollo-react): keep auto-routed canvas edges orthogonal [MST-13255] - #1021
Conversation
|
Apollo Coded App preview deployments are ready.
|
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
Aligns CanvasEdge rendering with SequenceEdge by using smooth-step routing for edges that have no explicit/routed waypoints, and tightens auto-waypoint behavior to avoid diagonal fallbacks after small endpoint displacements.
Changes:
- Treat
routing: 'waypoint'+waypoints.length === 0as a smooth-step path inuseEdgeGeometry. - Introduce shared collinearity detection (
getCollinearAxis) and use it incalculateAutoWaypointsto preserve orthogonality for small endpoint offsets. - Add regression tests to ensure
buildPathVerticesremains orthogonal under slight target displacement.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/components/Edges/shared/hooks/useEdgeGeometry.ts | Switches empty-waypoint waypoint routing to smooth-step path/label computation. |
| packages/apollo-react/src/canvas/components/Edges/shared/geometry.ts | Adds collinearity helper and updates auto-waypoint routing logic. |
| packages/apollo-react/src/canvas/components/Edges/shared/geometry.test.ts | Adds regression coverage for small endpoint offsets staying orthogonal. |
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
Storybook visual diffBaseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs Updated (PT): Aug 07, 2026, 01:31:46 AM |
3cea6d9 to
fd5eea0
Compare
KodudulaAshishUiPath
changed the title
fd5eea0 to
a8a546d
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.
Suppressed comments (1)
packages/apollo-react/src/canvas/components/Edges/shared/hooks/useEdgeGeometry.ts:103
isSmoothStepPathcauses this hook to return theuseEdgePathsmooth-step output, but the waypoint pipeline still recomputesbuildPathVertices/createRoundedPathwhenever coordinates change. In read-only/non-edit mode (whereenableSegmentsis false) this adds unnecessary per-render work for auto-routed edges.
const isWaypoint = routing === 'waypoint';
const isHandle = routing === 'handle';
const isSmoothStepPath = isHandle || (isWaypoint && waypoints.length === 0 && !enableSegments);
const pathPoints = useMemo(
a8a546d to
663cbfd
Compare
KodudulaAshishUiPath
changed the title
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.
Suppressed comments (1)
packages/apollo-react/src/canvas/components/Edges/shared/geometry.ts:36
- The JSDoc sentence has an unnecessary comma (“shares, when…”) which reads like a grammatical error and makes the description harder to parse.
/** The axis a source/target pair already shares, when both faces exit along it
* and the cross-axis offset is within {@link EDGE_CONSTANTS.COLLINEAR_TOLERANCE}.
* `null` when they are offset enough to need a mid-axis jog, or when the faces
* exit on different axes (an L-shape, which never needs one). */
Summary
calculateAutoWaypointsby replacing theMIN_SEGMENT_LENGTH / 2(16px) threshold with a real collinearity check atCOLLINEAR_TOLERANCE(1px).CanvasEdge could fall back to a diagonal path after a small node displacement.
calculateAutoWaypointsskipped the mid-axis jog whenever the endpoints were within 16px on the cross-axis, so any offset from 1-16px rendered as a single diagonal rather than an orthogonal route. The check now skips the jog only when the endpoints are genuinely collinear (within 1px); every other offset gets a proper elbow pair.Explicit and routed waypoint paths are unchanged.
Demo
Before:
Screen.Recording.2026-08-06.at.15.50.56.mov
After:
Screen.Recording.2026-08-06.at.15.50.08.mov
Validation
vitest run src/canvas/components/Edges/- 89 passedtsc --noEmit- clean